import React from "react";
import "./index.css";
import { NavBar, Image, List } from "antd-mobile";
import { useNavigate } from "react-router-dom";
function Index() {
  const navigate = useNavigate();

  const users = [
    {
      id: "1",
      avatar:
        "https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ",
      name: "艾米和其他8为朋友参加了追寻幻境之美：摧残的艺术之美展览活动",
      description: "8小时前",
    },
    {
      id: "2",
      avatar:
        "https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9",
      name: "艾伦和 灵位两人在10-11的“初学着股票投资上发表了评论",
      description: "10小时前",
    },
    {
      id: "3",
      avatar:
        "https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ",
      name: "杨柯香邀请你参加去加州参加一个活动",
      description: "一天前上午10点",
    },
    {
      id: "4",
      avatar:
        "https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ",
      name: "梨子和其他8为朋友假如了硬石屋顶派对阳光",
      description: "2024年3月20日 10:10",
    },
     {
      id: "5",
      avatar:
        "https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ",
      name: "张小北和其他8人评论了硬是屋顶牌堆阳光",
      description: "2024年3月20日 10:10",
    },
     {
      id: "6",
      avatar:
        "https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ",
      name: "你已经成功购买追寻环境之美：璀璨跃动的艺术之梦的展览门票",
      description: "2024年3月20日 10:00",
    },
  ];
  return (
    <div>
      <NavBar onBack={() => navigate("/")}>通知</NavBar>

      <List header="">
        {users.map((user) => (
          <List.Item
            key={user.name}
            prefix={
              <Image
                src={user.avatar}
                style={{ borderRadius: 20 }}
                fit="cover"
                width={40}
                height={40}
              />
            }
            description={user.description}
          >
            {user.name}
          </List.Item>
        ))}
      </List>
    </div>
  );
}

export default Index;
